import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import base from "@src/store/base";
import member from "@src/store/member";

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [{
    store: base,
    fields: ['businessName', 'businessLogo', 'themeColor'],
  }, {
    store: member,
    fields: ['wxName', 'wxHeadImg'],
  }],
  properties: {
    shareObj: {
      type: Object
    },
    qrcode: {
      type: String
    },
  },
  data: {
    canvasTemplate: null,
    shareImg: null,
  },
  observers: {
    "shareObj, qrcode, wxName, businessLogo": function (shareObj, qrcode, wxName, businessLogo) {
      if (shareObj && qrcode && wxName && businessLogo) {
        console.info("initFullPoster")
        this.initFullPoster();
      }
    }
  },
  methods: {
    handleImageOk(e) {
      this.setData({ shareImg: e.detail.path });
      this.triggerEvent('img', e.detail.path)
    },

    initFullPoster() {
      this.updateStoreBindings();

      let defaultWidth = 640;
      let defaultHeight = 939;
      let toFullUrl = getApp().toFullUrl
      let views = [{
        //头像
        type: "image",
        url: toFullUrl(this.data.businessLogo) + '?x-oss-process=image/resize,w_100,m_lfit/quality,q_90',
        css: {
          top: "26rpx",
          left: "54rpx",
          width: "93rpx",
          height: "93rpx",
          mode: "aspectFill",
          borderRadius: "50%"
        }
      }, {
        //昵称
        type: "text",
        text: this.data.wxName,
        css: {
          top: "40rpx",
          left: "161rpx",
          width: "300rpx",
          textAlign: "left",
          fontSize: "29rpx",
          color: "#000000"
        }
      }, {
        //副标题
        type: "text",
        text: "给你推荐了一个好东西",
        css: {
          top: "80rpx",
          left: "161rpx",
          width: 380 + "rpx",
          textAlign: "left",
          fontSize: "27rpx",
          color: "#888888"
        }
      },
      {
        //卡
        type: "image",
        url: toFullUrl(this.data.shareObj.imageUrl) + '?x-oss-process=image/resize,w_533,m_lfit/quality,q_90',
        css: {
          top: "147rpx",
          left: "54rpx",
          width: "533rpx",
          height: "547rpx",
          mode: "aspectFill",
          borderRadius: "20rpx"
        }
      },
      {
        //二维码
        type: "image",
        url: this.data.qrcode + '?x-oss-process=image/resize,w_140,m_lfit/quality,q_90',
        css: {
          top: "733rpx",
          right: "59rpx",
          width: "140rpx",
          height: "140rpx",
          mode: "scaleToFill"
        }
      },
      {
        //商品标题
        type: "text",
        text:this.data.shareObj.title.length > 20 ? this.data.shareObj.title.substr(0, 20) + "..." : this.data.shareObj.title,
        css: {
          top: "805rpx",
          left: "60rpx",
          width: "304rpx",
          textAlign: "left",
          fontSize: "29rpx",
          lineHeight: "37rpx",
          color: "#000000"
        }
      },
      ]
      if (this.data.shareObj.price === this.data.shareObj.originPrice
        || this.data.shareObj.originPrice === 0) {
        views.push({
          //商品价格
          type: "text",
          text: "￥" + this.data.shareObj.price,
          css: {
            top: "740rpx",
            left: "54rpx",
            width: 304 + "rpx",
            textAlign: "left",
            fontSize: "36rpx",
            fontWeight: "bold",
            lineHeight: "37rpx",
            color: "#E74B4B"
          }
        })
      } else {
        views.push({
          //商品价格
          type: "text",
          text: "￥" + this.data.shareObj.price,
          css: {
            top: "715rpx",
            left: "54rpx",
            width: 200 + "rpx",
            textAlign: "left",
            fontSize: "36rpx",
            fontWeight: "bold",
            color: "#E74B4B"
          }
        })
        views.push({
          //商品价格
          type: "text",
          text: "￥" + this.data.shareObj.originPrice,
          css: {
            top: "757rpx",
            left: "54rpx",
            width: 200 + "rpx",
            textAlign: "left",
            fontSize: "27rpx",
            textDecoration: "line-through",
            color: "#888888"
          }
        })
      }
      let canvasTemplate = {
        background: "#fff",
        width: defaultWidth + "rpx",
        height: defaultHeight + "rpx",
        borderRadius: "20rpx",
        views: views,
      };
      this.setData({ canvasTemplate: canvasTemplate })
    }
  }
})
